/*
* @Author: jh
* @Date: 2018/4/10
* @description: 系统 用户列表
*/
<template>
  <div>
      <div  v-if="isSimple">
        <!-- <div class="p-30">角色列表</div> -->
        <el-form  :model="userListSearch" label-width="80px" v-if="isSimple">
            <el-row>
            <el-col :span='6'>
                <el-form-item label="活动区域">
                    <el-select v-model="userListSearch.roleId" placeholder="请选择活动区域">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="(item,index) in roleList" 
                            :key="index"
                            :label="item.roleName" 
                            :value="item.id" >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span='8'>
                <el-form-item label="用户名称">
                    <el-input v-model="userListSearch.userName" placeholder="请输入用户名称" @keyup.enter.native="getUserList">
                         <el-button @click="getUserList" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
            </el-col>
            <!-- <el-col :span='2'>
                <el-form-item label-width="7px"> 
                    <el-button @click="getUserList"   type="primary" round>搜索</el-button>
                </el-form-item>
            </el-col> -->
            <el-col :span='10'>
                <el-button  class="pull-right" @click="toDetail('-1')" type="primary" round>添加</el-button>
            </el-col>
            </el-row>   
        </el-form>  
        <!-- 添加页面 -->
        <Add v-if="showAdd" :isShowAddFun="isShowAddFun" :id="id" :roleList='roleList' @getUserList='getUserList'></Add>       
        <div class="m-t-15">
            <el-table  :data="userList">
                <el-table-column
                    property="id"
                    label="ID"
                    width="80"
                    align="center">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="用户名" 
                    show-overflow-tooltip>
                    <!-- <template slot-scope="scope">
                        <el-tooltip :content="scope.row.roleName" placement="top" class="item">
                            <el-button  type="text" class="ca-text-over-flow-ellipsis"  :disabled="!isAuthEdit" @click="toDetail(scope.row)">{{ scope.row.roleName }}</el-button>
                        </el-tooltip>
                    </template> -->
                </el-table-column>
                <el-table-column 
                    property="roleName"
                    label="所属角色">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.model?scope.row.model.substring(0,scope.row.model.length-1):''}}</span>
                    </template> -->
                </el-table-column>
                <el-table-column
                    property="accout"
                    label="登录账号">
                    <!-- <template slot-scope="scope">
                        <el-button type="text" @click="toUser(scope.row)"> {{ scope.row.userCount }}</el-button>
                    </template> -->
                </el-table-column>
                <el-table-column
                    property="createTime"
                    label="创建时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime | cmsMoment('YYYY-MM-DD HH:mm:ss') }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    property="lastLogin"
                    label="最后一次登录">
                    <template slot-scope="scope">
                        <span>{{scope.row.lastLogin | cmsMoment('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150px"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button  type="text" @click="toDetail(scope.row.id)">修改</el-button>
                        <el-button  type="text" @click="deleteConfirm(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="align-center m-t-30"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageParam.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount">
            </el-pagination>
        </div>
    </div> 
     <div  v-else>   
         <!-- 添加页面 -->
        <Add v-if="showAdd" :isShowAddFun="isShowAddFun" :id="id" :roleList='roleList' @getUserList='getUserList'></Add>    
        <div class="m-t-15">
            <el-table :data="userList2">
                <el-table-column
                    property="id"
                    label="ID"
                    width="80"
                    align="center">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="用户名" 
                    show-overflow-tooltip>
                    <!-- <template slot-scope="scope">
                        <el-tooltip :content="scope.row.roleName" placement="top" class="item">
                            <el-button  type="text" class="ca-text-over-flow-ellipsis"  :disabled="!isAuthEdit" @click="toDetail(scope.row)">{{ scope.row.roleName }}</el-button>
                        </el-tooltip>
                    </template> -->
                </el-table-column>
                <el-table-column
                    property="accout"
                    label="登录账号">
                    <!-- <template slot-scope="scope">
                        <el-button type="text" @click="toUser(scope.row)"> {{ scope.row.userCount }}</el-button>
                    </template> -->
                </el-table-column>
                <el-table-column
                    property="createTime"
                    label="创建时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime | cmsMoment('YYYY-MM-DD HH:mm:ss') }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    property="lastLogin"
                    label="最后一次登录">
                     <template slot-scope="scope">
                            <span>{{scope.row.lastLogin | cmsMoment('YYYY-MM-DD HH:mm:ss')}}</span>
                     </template>
                </el-table-column>
                <el-table-column
                    width="150px"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button  type="text" @click="toDetail(scope.row.id)">修改</el-button>
                        <el-button  type="text" @click="deleteConfirm(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>       
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import Add from './add.vue'; //组件
import UserService from '../../../service/system-config/user';
import RoleService from '../../../service/system-config/role';
import { PageParam, SysUserInfoVO, SysRole, SysUser } from '../../../api/Interface'; // 接口
import { sysUserSearchDto } from '../../../service/system-config/systemInterface';
import { getParamsForList, setParamsForList } from '../../../libs/utils';

@Component({
  components: { Add }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public msg: number = 123;
  public userListSearch: sysUserSearchDto = {} as sysUserSearchDto ; // 表单数据
  public pageParam: PageParam = {
      pageIndex: 1,
      pageSize: 10,
  } as PageParam;
  public userList: SysUserInfoVO[] = [] as SysUserInfoVO[]; // 后台数据
  public totalCount: number = 0; // 总数
  public currentPage: number = 1; // 当前页
  public showAdd: boolean = false; // 是否显示 添加页
  public id: string = '-1'; // 用户id
  public roleList: SysRole[] = [] as SysRole[];
  public isSimple: boolean = true; // 是否根据角色id获取用户列表 isSimple为true，表示简单获取，为false时，根据角色id获取用户列表
  public userList2: SysUser[] = [] as SysUser[]; // 后台数据
  public roleId: string =  '-1'; // 角色id
  // refs
  public $refs: { };

  // watch
  @Watch('msg')
  public onChildChanged(val: string, oldVal: string) {
    return val + '***';
  }

  // 声明周期钩子
  public mounted() {
      if (this.$route.params.roleId) {
        this.isSimple = false;
      } else {
        this.isSimple = true;
      }
      // 获取local中存储的搜索条件
        const routerName = this.$root.$route.name;
        const localParams = getParamsForList(routerName);
        this.userListSearch = Object.assign({}, this.userListSearch, localParams.searchParams);
        this.pageParam = Object.assign({}, this.pageParam, localParams.pageParam);
        // 获取local中存储的搜索条件 end
      this.getRoleList(); // 获取全部角色，获取的数据 需要往 添加组建中传递
      this.getUserList(); // 获取列表
  }
  // 获取全部角色
  public async getRoleList() { //获取所有角色
     const res = await RoleService.sysRoleAll();
     this.roleList = res; 
  }


   //获取用户列表
   public async getUserList() { 
       if (this.isSimple) { 
            //（简单）从menu进入
            //重构数据
            this.userListSearch['pageParam.pageIndex'] = this.pageParam.pageIndex;
            this.userListSearch['pageParam.pageSize'] = this.pageParam.pageSize;
            // local中存当前搜索条件 
            const params = {
            pageParam: this.pageParam,
            searchParams: this.userListSearch,
            };
            const routerName = this.$root.$route.name;
            setParamsForList(params, routerName);
            // local中存当前搜索条件 end
            const res = await UserService.sysUserPage( this.userListSearch);
            // console.log(res,'获取用户列表')
            this.userList = res.resultData;
            this.totalCount = res.totalCount;
       } else {
             //根据角色id获取用户列表 从角色列表页进入
             //重构数据
            const res = await UserService.getByRoleId(this.$route.params.roleId);
            //console.log(res, '获取用户列表');
            this.userList2 = res;
       }  
  }
  // pageSize 改变时会触发
  public handleSizeChange(val: number) {
      this.pageParam.pageSize = val;
      this.getUserList();
  }
  // 当前页改变时会触发
  public handleCurrentChange(val: number) {
      this.pageParam.pageIndex = val;
      this.getUserList();
  }
  // dialog 显示、隐藏
  public isShowAddFun() {
      this.showAdd = !this.showAdd;
  }
   // 跳转到编辑页
  public toDetail(id: string) {
      this.id = id; // 假数据
      this.isShowAddFun();
  }
  // 删除确认
  public deleteConfirm(id: string) {
     this.$confirm('是否删除此用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //删除方法
          this.deleteDate(id);
        });
  }
   //删除方法
   public async deleteDate(id: string) {
        const res = await UserService.sysUserDelete( id );
        if (res.resCode === '0') {
            this.$message({
                type: 'success',
                message: '用户删除成功!',
                center: true,
            });
            this.getUserList();    
        }
   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
